<!--
	手风琴组件

		slot
			default 展开的内容区
			accordion-title-right 标题右侧内容（click事件冒泡还没解决，用a标签或者f7-button的话，加上href="javascript:;"可解决）
		
		props
			title[string = ''] 标题
			opened[boolean = true] 是否默认展开
			accordionItemClass[string = ''] f7-list-item上添加class
			disabled[boolean = false] 是否禁止展开收起 禁用会去掉展开收起的箭头
-->

<template>
    <f7-list accordion-list
             class="accordion"
             :class="{'accordion-disabled': disabled}">
        <f7-list-item accordion-item
                      :class="accordionItemClass"
                      :accordion-item-opened="opened"
                      :opened="opened"
                      @accordion:beforeclose="fnBeforeChange"
                      @accordion:beforeopen="fnBeforeChange">
            <span slot="content-start"
                  class="title-solid" v-if="showSolid"></span>
            <i slot="content"
               class="i"></i>
            <span slot="inner-start"
                  class="text">
                <span v-if="$slots.title"><slot name="title"></slot></span>
                <span v-else>{{title}}</span>
                <slot name="accordion-title-right"></slot>
            </span>

            <f7-accordion-content>
                <slot name="default"></slot>
            </f7-accordion-content>
        </f7-list-item>
    </f7-list>
</template>

<script>
export default {
    name: 'v-accordion',
    props: {
        title: {
            type: String,
            default: ''
        },
        opened: {
            type: Boolean,
            default: true
        },
        accordionItemClass: {
            type: String,
            default: ''
        },
        disabled: {
            type: Boolean,
            default: false
        },
        showSolid:{
            type:Boolean,
            default:true
        }
    },
    methods: {
        fnBeforeChange (prevent) {
            this.disabled && prevent()
        }
    }
}
</script>

<style lang="less" scoped>
@deep: ~">>>";
.accordion {
    margin: 0;

    @{deep}.accordion-item > .item-link > .item-content {
        justify-content: start;
        align-items: center;
        position: relative;
        padding-left: 22px;

        span.title-solid {
            margin-right: 8px;
            width: 4px;
            height: 12px;
            background-color: #3385ff;
        }

        i.i {
            width: 100%;
            height: 1px;
            background: #e9e9e9;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
        }

        span.text {
            font-size: 14px;
            font-weight: 600;
            color: #333;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            > span {
                flex-shrink: 0;
                max-width: 100%;
            }
        }
    }
}

.accordion-disabled {
    @{deep}.item-inner::before {
        display: none;
    }
}
</style>